<template>
    <el-container style="padding: 0 200px;">
        <el-aside class="gaside" style="width: 250px;height: 500px;">
            <h4>商品分类</h4>
            <ul>
                <li><a href="/front/drug/1">感冒药</a></li>
                <li><a href="/front/drug/2">抗生素</a></li>
                <li><a href="/front/drug/3">维生素</a></li>
                <li><a href="/front/drug/4">消化药</a></li>
                <li><a href="/front/drug/5">心脏药</a></li>
                <li><a href="/front/drug/6">止痛药</a></li>
            </ul>
        </el-aside>
        <el-main style="padding: 0;" class="detail">
            <el-row>
                <el-col :span="12" class="pd15">
                    <div class="grid-content ">
                        <el-image style="" :src="getImage(drug.img)" ></el-image>
                    </div>
                </el-col>
                <el-col :span="12" class="pd15" style="background-color: white;">
                    <div class="grid-content">
                        <h4>{{ drug.goodName }}</h4>
                        <span>￥{{ drug.price }}</span>
                    </div>
                    <div style="padding: 20px 0px;">当前库存：{{ drug.stock }}</div>
                    <!-- <div style="padding: 20px 0px;">总销量{{  }}</div> -->
                    <div class="inp" style="height: 30px;width: 100%;text-align: center;margin-top: 50px;">
                        <el-button :disabled="num <= 0" type="" style="width: 35px;" @click="minusNum">-</el-button>
                        <el-input style="width: 80px;" @change="numChange" v-model="num"></el-input>
                        <el-button type="" style="width: 35px;" @click="addNum">+</el-button>
                    </div>
                    <div style="text-align: center;padding: 30px 0px;">
                        <el-button type="success" @click="addShopCart(drug.drugId)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-ic_jiarugouwuche"></use>
                            </svg>加入购物车
                        </el-button>
                        <!-- 暂时不要 -->
                        <!-- <el-button type="success" @click="buy(drug.drugId)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zaicigoumai"></use>
                            </svg>立即购买
                        </el-button> -->

                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            drugId: 0,
            drug: {},
            num: 1
        };
    },
    methods: {
        numChange() {
            //手动输入数量 函数判断
            if (this.num < 0) {
                this.num = 0
            }
            if (this.num > this.drug.inventory) {
                this.$message.warning("库存仅剩" + this.drug.inventory + "件")
                this.num = this.drug.inventory
            }
        },
        minusNum() {
            //商品数量减
            this.num--
        },
        addNum() {
             //商品数量加
            this.num++
            if (this.num > this.drug.inventory) {
                this.$message.warning("库存仅剩" + this.drug.inventory + "件")
                this.num = this.drug.inventory
            }
        },
        getImage() {
            //图片回显
            return 'http://localhost:8081/common/download?name=' + this.drug.img
        },
        getDrug() {
            //获取药物详情
            this.request.get(`/drug/${this.drugId}`).then(res => {
                if (res.code == 200) {
                    this.drug = res.data;
                    console.log(res.data)
                }
            })
        },
        buy() {

        },
        //加入购物车按钮
        addShopCart(drugId) {
            var shopCart = {}
            shopCart.customerId = JSON.parse(localStorage.getItem("customer")).id
            shopCart.drugId = drugId
            shopCart.count = this.num
            console.log("当前durgid=>",drugId)
            this.request.post("/shopcart/addShopCart", shopCart).then(res => {
                if (res.code == 200) {
                    this.$message.success("加入购物车成功!!!")
                }
            })
        }
    },
    created() {

    },
    mounted() {
        this.drugId = this.$route.params.drugId;
        console.log("当前===>",this.drugId)
        this.getDrug();
    },
}
</script>


<style lang="less" scoped>
.pd15 {
    padding: 0 15px 20px 15px;
}

.fbtn {
    background-color: blue;

}

.lbtn {
    background-color: blue;
    margin-right: 200px;
}

.icon {
    font-size: 20px;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    margin-right: 5px;
}

.detail {
    text-align: center;

    h4 {
        text-align: center;
        font-weight: lighter;
        padding: 10px 0px;
    }

    span {
        font-size: 28px;
    }
}

.gaside {
    background-color: white;

    h4 {
        padding: 20px 0px 20px 30px;
        background-color: #f5f5f5;
        border: 1px solid rgba(0, 0, 0, 0.07);
        margin: 0;
    }

    ul {
        padding: 0;
        text-align: center;
    }

    ul li {
        list-style: none;
        padding: 15px;
    }

    ul li:hover {
        background-color: #eeeeee;
    }

    a {
        text-decoration: none;
        color: black;
    }


}
</style>